<template>
  <qui-page :data-qui-theme="theme" class="page-withdra">
    <view class="cash" @click.stop="toggleBox">
      <view class="cash-content">
        <!-- 收款人 -->
        <view class="cash-content-tab" v-if="!wxpayMchpayClose">
          <qui-cell-item :title="i18n.t('modify.collectionwechat')" slot-right :arrow="false" :border="false">
            <input class="cash-content-input cashphon" type="number" maxlength="11" @input="setphonnumber"
              v-model="withdrawalPhon" :placeholder="i18n.t('modify.withdrawalPhon')"
              placeholder-style="color:rgba(221,221,221,1)" />
          </qui-cell-item>
        </view>
        <!-- 收款人 -->
        <view class="cash-content-tab" v-else>
          <qui-cell-item :title="i18n.t('modify.payee')" slot-right :arrow="false" :border="false">
            <text class="cash-content-name">
              {{ name }}
            </text>
          </qui-cell-item>
        </view>
        <!-- 可提现金额 -->
        <view class="cash-content-tab">
          <qui-cell-item :title="i18n.t('modify.withdrawable')" slot-right :arrow="false" :border="false">
            <text class="cash-content-name">￥{{ balance }}</text>
          </qui-cell-item>
        </view>
        <!-- 提现金额 -->
        <view class="cash-content-tab">
          <qui-cell-item :title="i18n.t('modify.withdrawalamount')" slot-right :arrow="false" :border="false">
            <input class="cash-content-input" type="digit" maxlength="10" v-model="cashmany" @input="settlement"
              @blur="loseFocus" :placeholder="
                i18n.t('modify.enteramount', {
                  num: forums.set_cash.cash_min_sum ? forums.set_cash.cash_min_sum : 1,
                })
              " placeholder-style="color:rgba(221,221,221,1)" />
          </qui-cell-item>
        </view>



      </view>
      <view class="cash-explain" v-if="!wxpayMchpayClose">
        {{ i18n.t('modify.withdrawalTitle') }}
      </view>

      <view class="cash-button">
        <qui-button class="cash-button-sun" type="primary" size="large" @click="cashWallet" :disabled="show">
          {{ i18n.t('modify.submission') }}
        </qui-button>
      </view>
    </view>
    </view>
    <!-- #ifdef MP-WEIXIN -->
    <uni-popup ref="authPhone" type="bottom">
      <qui-auth-phone @closeDialog="closeDialog"></qui-auth-phone>
    </uni-popup>
    <!-- #endif -->
  </qui-page>
</template>

<script>
  import {
    status
  } from '@/library/jsonapi-vuex/index';
  import forums from '@/mixin/forums';
  // #ifdef  H5
  import tcaptchs from '@/utils/tcaptcha';
  // #endif

  export default {
    mixins: [
      forums,
      // #ifdef  H5
      tcaptchs,
      // #endif
    ],
    data() {
      return {
        userid: '',
        second: 60,
        num: 5,
        cashmany: '',
        name: '',
        balance: '',
        userphon: '',
        usertestphon: '',
        code: '',
        test: '',
        test2: '',
        judge: false,
        sun: true,
        phon: true,
        length: false,
        contint: '',
        procedures: 0,
        inshow: false,
        inisIphone: false,
        casherrotest: '',
        casherro: false,
        disabtype: false,
        percentage: 0,
        cost: 0,
        interval: '',
        captcha: null, // 腾讯云验证码实例
        ticket: '',
        randstr: '',
        captchaResult: {},
        withdrawalPhon: '', // 提现手机号
        withdrawalNumber: '',
        cashType: 0,
        wxpayMchpayClose: true,
        forbiddenSpots: true,
        show: false
      };
    },
    onLoad() {
      this.userid = this.usersid;
      this.setmydata();
      this.wxpayMchpayClose = this.forums.paycenter.wxpay_mchpay_close;
      this.$nextTick(() => {
        this.cost = this.forums.set_cash.cash_rate;
        const prop = this.forums.set_cash.cash_rate * 100;
        this.percentage = prop;
      });
      // 接受验证码captchaResult
      this.$u.event.$on('captchaResult', result => {
        this.ticket = result.ticket;
        this.randstr = result.randstr;
        this.btnButton();
      });
      this.$u.event.$on('closeChaReault', () => {
        // this.postLoading = false;
        uni.hideLoading();
      });
      if (this.forums.paycenter.wxpay_mchpay_close) {
        this.cashType = 1;
      } else {
        this.cashType = 0;
      }
    },
    computed: {
      forum() {
        return this.$store.getters['jv/get']('forum/1');
      },
      usersid() {
        return this.$store.getters['session/get']('userId');
      },
      user() {
        const data = this.$store.getters['jv/get'](`users/${this.usersid}`);
        return data;
      },
    },
    watch: {
      forum(newValue) {
        if (newValue) {
          this.cost = this.forum.set_cash.cash_rate;
          const prop = this.forum.set_cash.cash_rate * 100;
          this.percentage = prop;
          this.wxpayMchpayClose = this.forum.paycenter.wxpay_mchpay_close;
          if (this.forum.paycenter.wxpay_mchpay_close) {
            this.cashType = 1;
          } else {
            this.cashType = 0;
          }
        }
      },
      deep: true,
    },
    methods: {
      fourse() {
        this.inshow = true;
      },
      btndata(num) {
        this.code = num;
      },
      btncash() {
        if (this.forums.paycenter.wxpay_mchpay_close) {
          if (/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.withdrawalPhon)) {
            this.verifytitle();
          } else {
            uni.showToast({
              icon: 'none',
              title: this.i18n.t('modify.changesphon'),
              duration: 2000,
            });
          }
        } else {
          this.verifytitle();
        }
      },
      settlement() {
        setTimeout(() => {
          if (this.cashmany[0] === '.') {
            const num = 0;
            const cun = '.';
            this.cashmany = num + cun;
          }
          this.cashmany = this.cashmany
            .replace(/[^\d.]/g, '')
            .replace(/\.{2,}/g, '.')
            .replace('.', '$#$')
            .replace(/\./g, '')
            .replace('$#$', '.')
            .replace(/^(-)*(\d+)\.(\d\d).*$/, '$1$2.$3')
            .replace(/^\./g, '');
          if (this.cashmany.length >= 1) {
            if (this.forums && this.forums.set_cash.cash_min_sum) {
              if (Number(this.cashmany) < this.forums.set_cash.cash_min_sum) {
                this.forbiddenSpots = false;
              } else {
                this.forbiddenSpots = true;
              }
            }
          }
          if (Number(this.cashmany) > Number(this.balance)) {
            this.cashmany = this.cashmany.slice(0, this.cashmany.length - 1);
            uni.showToast({
              icon: 'none',
              title: this.i18n.t('modify.greaterthan'),
              duration: 2000,
            });
          }
          if (this.cashmany.length > 0) {
            this.length = true;
            const number = this.cashmany - this.cashmany * this.cost;
            if (number) {
              this.contint = `¥${number.toFixed(2)}`;
              const casnumber = this.cashmany * this.cost;
              this.procedures = casnumber.toFixed(2);
            } else {
              this.contint = '';
              this.procedures = '';
            }
          } else if (this.cashmany.length <= 0) {
            // this.length = false;
            this.contint = '';
            const casnumber = this.cashmany * this.cost;
            this.procedures = casnumber.toFixed(2);
          }
        }, 5);
      },
      loseFocus() {
        if (this.cashmany.length >= 1) {
          if (this.forums.set_cash.cash_min_sum) {
            if (Number(this.cashmany) < this.forums.set_cash.cash_min_sum) {
              this.cashmany = '';
              this.settlement();
              uni.showToast({
                icon: 'none',
                title: this.i18n.t('modify.enteramount', {
                  num: this.forums.set_cash.cash_min_sum ? this.forums.set_cash.cash_min_sum : 1,
                }),
                duration: 2000,
              });
            }
          }
        }
      },
      // 提现手机号设置
      setphonnumber() {
        setTimeout(() => {
          this.withdrawalPhon = this.withdrawalPhon.replace(/[^\d]/g, '');
        }, 30);
      },
      // 点击获取验证码计时开始
      btnButton() {
        if (this.forums.qcloud.qcloud_sms === false) {
          uni.showToast({
            icon: 'none',
            title: this.i18n.t('modify.NoteOpen'),
            duration: 2000,
          });
        } else {
          if (!this.user.mobile) {
            uni.showToast({
              icon: 'none',
              title: this.i18n.t('modify.nohasphon'),
              duration: 2000,
            });
            return;
          }
          this.posttitle();
          clearInterval(this.interval);
          this.sun = false;
          this.interval = setInterval(() => {
            this.second -= 1;
          }, 1000);
          setTimeout(() => {
            clearInterval(this.interval);
            this.sun = true;
            this.second = 60;
          }, 60000);
        }
      },
      // 获取个人信息
      setmydata() {
        const params = {
          _jv: {
            type: 'users',
            id: this.userid,
          },
          include: ['groups', 'wechat'],
        };
        this.$store.dispatch('jv/get', params).then(data => {
          this.name = data.username;
          this.balance = data.walletBalance;
          this.usertestphon = data.mobile;
          this.userphon = data.originalMobile;
          this.withdrawalPhon = data.originalMobile;
          if (!this.usertestphon) {
            this.disabtype = true;
          }
        });
      },
      sendsms() {
        if (this.forums.qcloud.qcloud_captcha) {
          if (!this.ticket || !this.randstr) {
            this.verification();
            return false;
          }
        } else {
          this.second = 60;
          this.btnButton();
        }
      },
      verification() {
        // #ifdef MP-WEIXIN
        // const _this = this;
        wx.navigateToMiniProgram({
          appId: 'wx5a3a7366fd07e119',
          path: '/pages/captcha/index',
          envVersion: 'release',
          extraData: {
            appId: this.forums.qcloud.qcloud_captcha_app_id, // 您申请的验证码的 appId
          },
          success() {
            console.log('验证码成功打开');
          },
          fail() {
            uni.hideLoading();
            // _this.postLoading = false;
          },
        });
        // #endif
        // #ifdef H5
        // eslint-disable-next-line no-undef
        this.captcha = new TencentCaptcha(this.forums.qcloud.qcloud_captcha_app_id, res => {
          if (res.ret === 0) {
            this.ticket = res.ticket;
            this.randstr = res.randstr;
            // 验证通过后发布
            this.second = 60;
            this.btnButton();
          }
          if (res.ret === 2) {
            // this.postLoading = false;
            // uni.hideLoading();
          }
        });
        // 显示验证码
        this.captcha.show();
        // #endif
      },
      // 发动短信
      posttitle() {
        const params = {
          _jv: {
            type: 'sms/send',
          },
          mobile: this.user.mobile,
          type: 'verify',
          captcha_ticket: this.ticket,
          captcha_rand_str: this.randstr,
        };
        const postphon = status.run(() => this.$store.dispatch('jv/post', params));
        postphon.then(res => {
          this.num -= 1;
          this.second = res._jv.json.data.attributes.interval;
          this.ticket = '';
          this.randstr = '';
        });
      },
      // 验证短信
      verifytitle() {
        const params = {
          _jv: {
            type: 'sms/verify',
          },
          code: this.code,
          type: 'verify',
        };
        this.$store
          .dispatch('jv/post', params)
          .then(res => {
            if (res) {
              this.cashwithdrawal();
            }
          })
          .catch(err => {
            if (err.statusCode === 500) {
              this.test =
                this.i18n.t('modify.validionerro') + this.num + this.i18n.t('modify.frequency');
              this.judge = true;
              this.empty();
              if (this.num <= 0) {
                this.test = this.i18n.t('modify.lateron');
              }
            } else if (err.statusCode === 422) {
              uni.showToast({
                icon: this.icon,
                title: err.data.errors[0].detail,
                duration: 2000,
              });
              this.empty();
            }
          });
      },

      //提现到钱包
      cashWallet() {
        let self = this;
        let userid = self.$store.getters['session/get']('userId')
        let params = {
          _jv: {
            type: `wallet/user/${userid}`,
          },
          user_id: userid,
          operate_type: 2,
          operate_amount: self.cashmany,
          operate_reason: '提现到商城',
          wallet_status: 0
        };
        self.$store
          .dispatch('jv/patch', params)
          .then(res => {
            self.show = true;
            let order_no = Math.floor(Math.random() * 1000);
            order_no = new Date().getTime() + order_no;
            self._post('iot.balancebbs/frombbs', {
              pay_price: self.cashmany,
              order_no: order_no,
            }, function(result) {
              uni.showToast({
                title:'提现成功',
                duration: 2000,
              });
              // #ifdef H5
              setTimeout(() => {
                uni.navigateBack({
                  delta: 1,
                });
              }, 1500);
              // #endif
              // #ifndef H5
              setTimeout(() => {
                uni.navigateBack({
                  success() {
                    const pages = getCurrentPages();
                    pages[1].onLoad();
                  },
                });
              }, 1500);
              // #endif
            });
          }).catch(err => {
            //出错了，退回钱包
            params.operate_type=1;
            params.operate_reason= '提现到商城失败退回',
            self.$store
              .dispatch('jv/patch', params)
              .then(res => {});
          });

      },
      // 提现申请
      cashwithdrawal() {
        let params = {};
        if (this.cashType === 0) {
          this.withdrawalNumber = this.withdrawalPhon;
          params = {
            _jv: {
              type: 'wallet/cash',
              include: ['user', 'userWallet'],
            },
            cash_apply_amount: this.cashmany,
            cash_type: this.cashType,
            cash_mobile: this.withdrawalPhon,
          };
        } else {
          params = {
            _jv: {
              type: 'wallet/cash',
              include: ['user', 'userWallet'],
            },
            cash_apply_amount: this.cashmany,
            cash_type: this.cashType,
          };
        }
        const postcash = status.run(() => this.$store.dispatch('jv/post', params));
        postcash
          .then(res => {
            if (res) {
              this.cashmany = '';
              this.contint = '';
              this.procedures = 0;
              this.setmydata();
              this.sun = true;
              this.second = 60;
              clearInterval(this.interval);
              uni.showToast({
                title: this.i18n.t('modify.withdrawal'),
                duration: 2000,
              });
              // #ifdef H5
              setTimeout(() => {
                uni.navigateBack({
                  delta: 1,
                });
              }, 1500);
              // #endif
              // #ifndef H5
              setTimeout(() => {
                uni.navigateBack({
                  success() {
                    const pages = getCurrentPages();
                    pages[1].onLoad();
                  },
                });
              }, 1500);
              // #endif
            }
          })
          .catch(err => {
            if (err.statusCode === 422) {
              uni.showToast({
                icon: 'none',
                title: err.data.errors[0].detail[0],
                duration: 2000,
              });
              this.empty();
            } else if (err.statusCode === 500) {
              uni.showToast({
                icon: 'none',
                title: err.data.errors[0].detail,
                duration: 2000,
              });
              this.empty();
            }
          });
      },
      bandPhon() {
        if (this.user && this.user.mobile === '') {
          // #ifdef MP-WEIXIN
          this.$refs.authPhone.open();
          // #endif
          // #ifdef H5
          uni.navigateTo({
            url: '/pages/modify/setphon',
          });
          // #endif
        }
      },
      toggleBox() {
        this.inshow = false;
      },
      empty() {
        const empty = this.$refs.quiinput;
        empty.deleat();
      },
      // #ifdef MP-WEIXIN
      closeDialog() {
        this.$refs.authPhone.close();
      },
      // #endif
    },
    onUnload() {
      this.$u.event.$off('captchaResult');
      this.$u.event.$off('closeChaReault');
      // 隐藏验证码
      if (this.captcha) {
        this.captcha.destroy();
      }
    },
  };
</script>

<style lang="scss" scoped>
  @import '@/styles/base/variable/global.scss';
  @import '@/styles/base/theme/fn.scss';

  .page-withdra {
    /* #ifdef H5 */
    padding-top: 40rpx;
    /* #endif */
    background-color: --color(--qui-BG-2);
    box-sizing: border-box;

    .cash {
      width: 100vw;
      /* #ifndef H5 */
      height: 100vh;
      /* #endif */
      background-color: --color(--qui-BG-2);
      box-sizing: border-box;
    }

    .cash-content {
      padding: 31rpx 0 0 40rpx;
      box-sizing: border-box;
    }

    /* #ifdef H5 */
    .uni-input-input {
      color: --color(--qui-FC-333);
    }

    /* #endif */
    .cash-content-tab,
    .cash-content-tabi {
      padding: 0 40rpx 0 0;
      justify-content: space-between;
      border-bottom: 2rpx solid --color(--qui-BOR-ED);
    }

    .cash-content-tabi {
      /deep/.cell-item__body {
        align-items: flex-start;
        height: 150rpx;

        &__content {
          margin-top: 32rpx;
        }

        &__right {
          margin-top: 26rpx;
        }
      }
    }

    /deep/.cell-item__body__content-title {
      color: --color(--qui-FC-777);
    }

    /deep/.cash-content-tab-item {
      height: 150rpx;
    }

    .cash-content-name {
      font-size: $fg-f5;
      font-weight: 400;
      color: --color(--qui-FC-333);
    }

    .cash-content-input {
      width: 350rpx;
      height: 100%;
      font-size: $fg-f5;
      font-weight: bold;
      line-height: 100rpx;
      color: --color(--qui-FC-333);
      text-align: right;
    }

    .cashphon {
      font-weight: 400;
    }

    // .cash-content-actual {
    //   padding-top: 26rpx;
    //   box-sizing: border-box;
    // }
    .cash-content-ellipsis {
      height: 50rpx;
      font-size: $fg-f2;
      font-weight: 400;
      line-height: 50rpx;
      color: --color(--qui-FC-333);
      text-align: right;
    }

    .cash-content-ellipsis2 {
      height: 45rpx;
      font-size: $fg-f5;
      font-weight: bold;
      line-height: 45rpx;
      color: --color(--qui-RED);
    }

    .cash-content-proced {
      height: 50rpx;
      margin-top: 11rpx;
      font-size: $fg-f2;
      font-weight: 400;
      line-height: 50rpx;
      color: --color(--qui-FC-777);
    }

    .cash-phon {
      display: flex;
      width: 710rpx;
      height: 100rpx;
      justify-content: space-between;
      border-bottom: 2rpx solid --color(--qui-BOR-ED);
    }

    .cash-phon-test {
      font-size: $fg-f4;
      font-weight: 400;
      line-height: 100rpx;
      color: --color(--qui-FC-777);
    }

    .cash-phon-num {
      margin: 0 0 0 100rpx;
      font-size: $fg-f5;
      font-weight: 400;
      line-height: 100rpx;
      color: --color(--qui-FC-000);
    }

    .cash-phon-num1 {
      margin: 0 0 0 10rpx;
      font-size: $fg-f4;
      font-weight: 400;
      line-height: 100rpx;
      color: --color(--qui-FC-777);
    }

    .cash-phon-send {
      display: block;
      height: 70rpx;
      min-width: 180rpx;
      margin: 15rpx 40rpx 0;
      font-size: $fg-f4;
      font-weight: 400;
      line-height: 70rpx;
      color: --color(--qui-FC-FFF);
      text-align: center;
      background-color: --color(--qui-MAIN);
      /* #ifdef H5-PLAY || MP-WEIXIN-PLAY */
      background-color: #ea3d5a;
      /* #endif */
      border-radius: 5rpx;
    }

    .cash-erro {
      margin-top: 20rpx;
      font-size: $fg-f2;
      font-weight: 400;
      color: --color(--qui-RED);
    }

    .cash-input {
      width: 710rpx;
    }

    .cash-input-test {
      font-size: $fg-f4;
      font-weight: 400;
      line-height: 100rpx;
      color: --color(--qui-FC-777);
    }

    .cash-vftion-input {
      display: flex;
      width: 100%;
      height: 100rpx;
    }

    .cash-explain {
      width: 100%;
      padding-right: 40rpx;
      margin-top: 40rpx;
      font-size: 28rpx;
      line-height: 45rpx;
      color: --color(--qui-FC-777);
      box-sizing: border-box;
    }

    .cash-button {
      margin: 52rpx 0 0;
      border-radius: 7rpx;
      text-align: center;
    }

    // /deep/.cash-button-sun {
    //   border-radius: 7rpx;
    // }
  }

  /* #ifndef H5 */
  .cash-content-tabi {
    /deep/.cell-item__body {
      align-items: flex-start;
      height: 150rpx;

      &__content {
        margin-top: 32rpx;
      }

      &__right {
        margin-top: 26rpx;
      }
    }
  }

  /* #endif */
  .cash-button /deep/.qui-button--button {
    &[size='large'] {
      font-size: $fg-f4;
      color: --color(--qui-FC-FFF);
      border-radius: 7rpx;
    }
  }
</style>
